<template>
  <div id="search">
    <div v-show-extend="show">
      <div class="vue-dropdown">
        <input
          type="text"
          name="search"
          :placeholder="placeholder"
          v-model="searchVal"
          @change="searchValue"
          v-on:input="search($event)"
          @keyup.enter="submit()"
          @keydown.down="down"
          @keydown.up.provent="up"
        />
        <img src="../../../static/images/search.png" height="18" width="18" alt @click="btnSearch" />
      </div>
      <transition name="fade">
        <ul class="list-module" v-show="length">
          <li
            v-for="(item,index) in itemlist"
            @click="appClick(item)"
            :key="index"
            :class="{'bgcolor': ind == index}"
            @mouseover="flagHover(index)"
          >{{item.REPORT_ITEM_NAME}}</li>
        </ul>
      </transition>
    </div>
  </div>
</template>
<script>
import Bus from "@/components/common/bus"; //引入公共媒介JS BUS
export default {
  data() {
    return {
      searchVal: "",
      //datalist: [],
      ind: -1 //索引 实现上下选择
    };
  },
  props: {
    show: {
      //用于外部控制组件的显示/隐藏
      type: Boolean,
      default: true
    },
    placeholder: {
      type: String,
      default: "请输入需要搜索的项"
    },
    itemlist: {
      type: Array,
      default() {
        return [];
      }
    }
  },
  directives: {
    "show-extend": function(el, binding, vnode) {
      //bind和 update钩子
      let value = binding.value,
        searchInput = null;
      if (value) {
        el.style.display = "block";
      } else {
        //隐藏后，恢复初始状态
        el.style.display = "none";
        searchInput = el.querySelector(".search-text");
        searchInput.value = "";
      }
    }
  },
  computed: {
    length: function() {
      return this.itemlist.length;
    }
  },
  methods: {
    btnSearch() {
      if (this.searchVal == "") {
        alert(this.placeholder);
      } else {
        Bus.$emit("searchVal", this.searchVal);
        this.searchVal = "";
        this.ind = -1;
      }
    },
    appClick: function(data) {
      //点击搜索图标时执行函数
      Bus.$emit("searchVal", data.REPORT_ITEM_NAME);
      this.searchVal = "";
      this.ind = -1;
    },
    submit() {
      //按回车时搜索
      Bus.$emit("searchVal", this.searchVal);
      this.searchVal = "";
      this.ind = -1;
    },
    search: function(e) {
      //检测搜索框里的值是否改变函数
      let searchvalue = e.currentTarget.value;
      //                当按上下键时返回
      if (e.keyCode == 38 || e.keyCode == 40) return;
      Bus.$emit("searchKeywords", searchvalue);
    },
    searchValue() {
      //判断搜索框是否为空，如果为空让下拉选择隐藏函数
      if (this.searchVal == "") {
        Bus.$emit("searchVal", "");
      }
    },
    //            按下键往下选择
    down: function() {
      if (this.ind == this.itemlist.length - 1) {
        this.ind = 0;
      } else {
        this.ind++;
        this.searchVal = this.itemlist[this.ind].REPORT_ITEM_NAME; //输入框显示选择的内容
      }
    },
    //            按上键往上选择
    up: function() {
      if (this.ind == 0) {
        this.ind = this.itemlist.length - 1;
      } else {
        this.ind--;
        this.searchVal = this.itemlist[this.ind].REPORT_ITEM_NAME;
      }
    },
    //li hover
    flagHover: function(index) {
      this.ind = index;
    }
  }
};
</script>
<style scoped>
#search .vue-dropdown {
  position: relative;
  width: 280px;
  height: 34px;
  border: 1px solid #ccc;
  border-radius: 15px;
  padding-left: 10px;
  vertical-align: top;
}

#search .vue-dropdown input {
  height: 32px;
  width: 92%;
  width: -moz-calc(95% - 18px);
  width: -webkit-calc(95% - 18px);
  width: calc(95% - 18px);
  border: none;
}
.list-module {
  position: absolute;
  background: #fff;
  box-shadow: 0 0 5px #ddd;
  width: 100%;
  z-index: 9999;
  padding: 5px 0;
  max-height: calc(100vh - 190px);
  overflow-y: auto;
}
.list-module li {
  height: 35px;
  line-height: 35px;
  text-indent: 15px;
  cursor: pointer;
}
.list-module li.bgcolor {
  background-color: #f1f1f1;
}
.fade-enter-active,
.fade-leave-active {
  transition: all 0.5s;
}

/* .fade-leave-active 在 <2.1.8 中 */
.fade-enter,
.fade-leave-to {
  opacity: 0;
  -webkit-transform: translateY(20px);
  -moz-transform: translateY(20px);
  -ms-transform: translateY(20px);
  -o-transform: translateY(20px);
  transform: translateY(20px);
}
@media screen and (max-width: 768px){
  #search .vue-dropdown{
    width: 210px;
  }
}
</style>
